<template>
  <div class="about">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!-- <HkVideo :info="item" :iWndIndex="index + 1"></HkVideo> -->
        <iframe :src="`${publicPath}hkVedio/index.html?index=${index}&szIP=${item.port}pageNum=1`"/>
      </li>
    </ul>
  </div>
</template>
<script>
import HkVideo from "@/components/hk_video.vue";
export default {
  components: {
    HkVideo,
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
      list: [
        {
          url: "192.168.2.64",
          name: "海康摄像头1",
          user: "admin",
          port: "80",
          pwd: "dk16888888",
        },
        {
          url: "192.168.2.64",
          name: "海康摄像头1",
          user: "admin",
          port: "80",
          pwd: "dk16888888",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.about {
  margin: 0 auto;
  width: 80%;
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      // width: 40%;
      width: 33%;
      height: 360px;
      background-color: #000000;
      // margin-bottom: 10px;
      position: relative;
      iframe{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
